<template>
    <div class="outbox">
        <Box v-for="item in boxlist" :key="item.prop" :title="item.label" :disc="data[item.prop] + ''"
            :unit="item.unit">
        </Box>
    </div>
</template>
<script lang="ts" setup>
import { nextTick, onMounted, Ref, ref } from "vue";
import Box from "./_box2.vue";
import { REANIMATIONTIME } from "@b/model/enum";
import { Http } from "@b/model/base/http";

const boxlist = [{
    label: '累计服务总人次', prop: 'servicedTotalPerson', unit: '人次'
}, {
    label: '诊中服务人次', prop: 'servicingTotalPerson', unit: '人次'
}, {
    label: '双向转诊服务人次', prop: 'transferTotalPerson', unit: '人次'
}, {
    label: '累计服务总金额', prop: 'servicedTotalMoney', unit: '元'
}, {
    label: '诊中服务金额', prop: 'servicingTotalMoney', unit: '元'
}, {
    label: '双向转诊服务金额', prop: 'transferTotalMoney', unit: '元'
}]
const data: Ref<{ [key: string]: string }> = ref({})
const render = async () => {
    const res = await new Http().request('/v1/bigscreen/GetAnalyseInfo', { method: 'GET', cache: true })
    data.value = {}
    await nextTick()
    data.value = res
}
onMounted(() => {
    render()
    setInterval(() => {
        render()
    }, REANIMATIONTIME);
})
</script>

<style scoped>
.outbox {
    display: grid;
    color: var(--color-white);
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 12px;
    width: 100%;
    height: 100%;
}
</style>